<style lang="less">
    .chart-con {
        height: 200px;
    }

    .chart-con-300 {
        height: 300px;
    }

</style>

<template>
    <div>
        <!--     {{$data}}-->
        <Row class="margin-top-10 ">
            <Col span="12">
            <Row>

                <Col span="12">
                <Card class="margin-left-10">
                    <p slot="title" class="card-title">
                        <Icon type="flag"></Icon>
                        同分排名
                    </p>
                    <div class="chart-con">
                        <div style="font-size: 16px;float: right"><a title="刷新">
                            <Icon type="refresh"></Icon>
                        </a></div>
                        <div class="circleSapn" style="position: absolute;left:80px;top:70px;text-align: center">
                            <p style="font-size: 14px;margin-top:35px;margin-left: 90px;">名</p>
                            <div style="font-size: 40px;margin-top: -20px;margin-right:5px;">{{tfpm}}</div>
                            <p style="font-size: 18px;margin-top:-10px;">同分排名</p>
                        </div>
                    </div>
                    <div style="font-size: 12px;margin-top: -17px;"><h2>新增文字内容</h2><同分人数：{{dnNum}}（人） / 目前采集人数：{{data2Sum}}（人）</div>
                </Card>
                </Col>
                <Col span="12">
                <Card class="margin-left-10">
                    <p slot="title" class="card-title">
                        <Icon type="android-map"></Icon>
                        同分排名表-目前采集人数 {{data2Sum}}
                    </p>
                    <div class="chart-con">
                        <Table height="200" :columns="columns1" :data="data2" size="small"></Table>
                    </div>
                </Card>
                </Col>
            </Row>

            <Row class="margin-top-10 ">

                <Col span="12">
                <Card class="margin-left-10">
                    <p slot="title" class="card-title">
                        <Icon type="android-map"></Icon>
                        综合分析
                    </p>
                    <div class="chart-con">
                        <vechart_radar id="chart5" :chartData="radarData"></vechart_radar>
                    </div>
                </Card>
                </Col>

                <Col span="12">
                <Card class="margin-left-10">
                    <p slot="title" class="card-title">
                        <Icon type="android-map"></Icon>
                        单科排名
                    </p>
                    <div class="chart-con">
                        <vechart_bar id="chart3" :chartData="lineData"></vechart_bar>
                    </div>
                </Card>
                </Col>
            </Row>
            </Col>

            <Col span="12">
            <Card class="margin-left-10" style="height: 568px">
              <home_map></home_map>
            </Card>
            </Col>
        </Row>
        <Row class="margin-top-10 ">

            <Col span="24">
            <Card class="margin-left-10">
                <p slot="title" class="card-title">
                    <Icon type="android-map"></Icon>
                    志愿推荐
                    <small>根据目前数据采集统计和相关阀值设置推荐相关志愿</small>
                </p>
                <div style="text-align: left;min-height: 600px">
                    <major_recomend></major_recomend>
                </div>
            </Card>
            </Col>

        </Row>

    </div>


</template>

<script>
    import vechart_pie from '../vechart/component/vechart-pie.vue'
    import vechart_ring from '../vechart/component/vechart-ring.vue'
    import vechart_bar from '../vechart/component/vechart-bar.vue'
    import vechart_line from '../vechart/component/vechart-line.vue'
    import vechart_line_bar from '../vechart/component/vechart-line-bar.vue'
    import vechart_bar_hor from '../vechart/component/vechart-bar-hor.vue'
    import vechart_line_relation from '../vechart/component/vechart-line-relation.vue'
    import vechart_radar from '../vechart/component/vechart-radar.vue'

    import home_map from './components/home-map'
    import major_recomend from './components/major-recommend'

    import {exam} from '../../../../api/index.js';
    import echarts from 'echarts';

    export default {
        name: "demo",
        components: {
            vechart_pie,
            vechart_ring, vechart_bar,
            vechart_line,
            vechart_line_bar,
            vechart_bar_hor,
            vechart_line_relation,
            vechart_radar,
            home_map,
            major_recomend,
        },
        data() {
            return {
                tfpm: "",
                dnpm: "",
                dnNum: 0,
                map: {
                    center: {lng: 115.403119, lat: 38.028658},
                    zoom: 5
                },
                columns1: [
                    {
                        title: '分数',
                        key: 'score',
                        width: 75
                    },
                    {
                        title: '分段人数',
                        key: 'segNum'
                    },
                    {
                        title: '累计排名',
                        key: 'totalNum'
                    },
                    {
                        title: '采集人数',
                        key: 'gatherNum'
                    }
                ],
                data2Sum: 0,
                data2: [
                    {
                        score: '',
                        segNum: '',
                        totalNum: '',
                        gatherNum: ''
                    }

                ],
                pieData: {
                    name: '访问来源',
                    data: [
                        {value: 2103456, name: '数据1'},
                        {value: 1305923, name: '数据2'},
                        {value: 543250, name: '数据3'},
                        {value: 798403, name: '数据4'}
                    ]
                },
                ringData: {
                    name: '访问来源',
                    data: [
                        {value: 2156, name: '数据1'},
                        {value: 13923, name: '数据2'},
                        {value: 5430, name: '数据3'},
                        {value: 793, name: '数据4'}
                    ]
                },
                lineData: {
                    name: "名称",
                    xAxis: ['语文', '数学', '英语', '综合'],
                    data: [10, 30, 40, 20],
                    total:100
                },
                radarData: {
                    data: [100, 120, 130, 140, 150, 6000]
                },
                barHorData: {
                    data: [100, 120, 130, 140, 150, 6000]
                }

            }
        },
        methods: {
            line() {
                let chart3 = echarts.init(document.getElementById("chart3"));
                chart3.setOption({
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: this.lineData.xAxis,
                                axisTick: {
                                    alignWithLabel: true
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '排名',
                                type: 'bar',
                                barWidth: '60%',
                                data: this.lineData.data
                            }
                        ]

                    }

                    , {
                        notMerge: true

                    });
            },
            barHor() {
                let chart5 = echarts.init(document.getElementById("chart5"));
                chart5.setOption({
                        tooltip: {
                            formatter: '黑龙江省高考个人综合分析<br>语文：'
                            + this.barHorData.data[0] +
                            '<br>数学：' + this.barHorData.data[1] +
                            '<br>英语：' + this.barHorData.data[2] +
                            '<br>综合：' + this.barHorData.data[3] +
                            '<br>总分：' + this.barHorData.data[4] +
                            '<br>排名：' + (100000 - this.barHorData.data[5])

                        },
                        radar: {
                            // shape: 'circle',
                            indicator: [
                                {text: '语文', max: 150},
                                {text: '数学', max: 150},
                                {text: '英语', max: 150},
                                {text: '综合', max: 300},
                                {text: '总分', max: 750},
                                {name: '排名', max: 100000}
                            ]
                        },
                        series: [{
                            name: '个人综合分析',
                            type: 'radar',
                            // areaStyle: {normal: {}},
                            data: [
                                this.barHorData.data
                            ]
                        }]

                    }

                    , {
                        notMerge: true

                    });
            }

        },
        mounted() {
            this.$nextTick(function () {
                exam.getStudentAll_get().then((res) => {
                    if (res.data.resCode != 0) {
                        this.$Message.error(res.data.resMsg);
                    } else {

                        var dnPm = res.data.data.student.dnPm - res.data.data.student.detailPm;
                        this.tfpm = dnPm;
                        this.dnpm = res.data.data.student.dnPm;
                        this.dnNum = res.data.data.student.dnNum;
                        this.barHorData.data[0] = res.data.data.student.ywScore;
                        this.barHorData.data[1] = res.data.data.student.sxScore;
                        this.barHorData.data[2] = res.data.data.student.wyScore;
                        this.barHorData.data[3] = res.data.data.student.zhScore;
                        this.barHorData.data[4] = res.data.data.student.zfScore;
                        // this.lineData.data[0] = res.data.data.student.ywPm;
                        // this.lineData.data[1] = res.data.data.student.sxPm;
                        // this.lineData.data[2] = res.data.data.student.wyPm;
                        // this.lineData.data[3] = res.data.data.student.zhPm;
                        this.barHorData.data[5] = 100000 - this.dnpm;
                        //this.barHor();//TODO 只修改radarData数据即可,不用修改option
                        this.line();
                    }
                }, function (error) {
                    alert("系统异常，请先联系管理员");
                });
                exam.getSameRankList_get().then((res) => {
                    this.data2Sum = res.data.data.count;
                    this.data2 = res.data.data.list;

                }, function (error) {
                    alert("系统异常，请先联系管理员");
                });
            });
        }

    };
</script>

<style>
    .card-title {
        text-align: left;
    }

</style>
